<template>
  <div class="back">
    <div class="arrow cursor" @click="handleBack">
      <SvgIcon type="arrow" size="30" />
    </div>
    <div class="title">{{$attrs.title}}</div>
  </div>
</template>
<script>
export default {
  name: "Back",
  methods: {
    handleBack() {
      this.$emit("on-back");
    }
  }
};
</script>
<style lang="stylus" scoped>
.back {
  .arrow {
    padding: 1px
    background: transparent
    transition: 0.3s
    display: inline-block
    vertical-align: middle
  }
  .arrow:hover {
    background: rgba(78, 110, 246, 0.1)
  }
  .title {
    position: relative
    display: inline-block
    vertical-align: middle
    margin: 0 10px
    padding: 5px 0
  }
  .title:after {
    content: ''
    position: absolute
    display: block
    height: 3px
    background: #2acdcf
    border-radius: 2px
    top: 0px
    left: 0px
    bottom: 0px
  }
}
</style>